<template>
  <div class="homePageCard">
    <div class="cardTitle flexBetween padding5-10 fontSize18 fontWeight">
      <div class="titleName">应急处置过程</div>
    </div>
    <!-- <div class="timeLine-center">
      <div class="timeLine-sjx">
        <el-timeline>
          <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" :color="activity.color">
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div> -->
    <div class="timedialog">
      <el-timeline>
        <el-timeline-item v-for="(item,index) in timelinedata" :key="index" placement="left" :color="color">
          <span>
            <div style="margin:0 0 5px 0">
              {{item.flowName}}
            </div>
            <span>{{item.flowTime}}</span>
            <el-collapse v-model="activeName">
              <el-collapse-item :name="index+1">
                <template slot="title">
                  <i style="margin-left:70px" :class="judgeActive(index+1)!==-1? 'downArrow1':'downArrow2'"> </i>
                </template>
                <div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </span>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<script>
export default {
  name: "TimeLine",
  props: {
    timelinedata: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      color: "#3378df",
      activeName: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    };
  },
  methods: {
    judgeActive(data) {
      return this.activeName.indexOf(data);
    }
    // timeline(row) {
    //   this.$refs.timeline.open(true, row)
    // },
    // open(isEdit, obj) {
    //   this.innerVisible = true
    // }
  }
};
</script>

<style scoped lang="less">
.homePageCard {
  // margin-right: 15px;
  height: 98.5%;
  z-index: 99;
}
:deep(.el-timeline) {
  margin: 30px 40px 20px 20px;
  .el-timeline-item__tail {
    border-left: 2px solid #007fcf;
  }
  .el-timeline-item__node {
    background-color: #007fcf;
  }
  .el-timeline-item__content {
    color: #fff;
    font-weight: 600;
  }
  .el-timeline-item__timestamp {
    color: #fff;
  }
}
.el-timeline-item .el-timeline-item__node--normal {
  left: 120px;
}
.el-timeline-item .el-timeline-item__tail {
  left: 125px;
}
.timedialog {
  overflow: auto;
  height: 94%;
}
.timedialog .el-collapse {
  margin-left: 119px;
  border: none;
  margin-top: -22px;
}
:deep(.el-collapse-item__header) {
  align-items: center;
  height: 23px;
  line-height: 23px;
  background-color: transparent;
  border: none;
  color: #fff;
  border-bottom: none;
}
:deep(.el-collapse-item__wrap) {
  border: none;
  border-bottom: none;
  background-color: transparent;
}
:deep(.el-collapse-item__content) {
  padding-bottom: 0px !important;
}
.timedialog .el-timeline-item__node--01 {
  width: 18px !important;
  height: 18px !important;
  left: 117px !important;
}
:deep(.el-collapse-item__arrow) {
  display: none;
}
.downArrow1 {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("../../../assets/img/downArrow1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.downArrow2 {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../../../assets/img/downArrow1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: rotate(-90deg);
}
</style>
